<script lang="ts" setup>

import {func, globalConfig} from "../js/Data.ts";
import {computed} from "vue";
import {Item} from "../js/Item";

let inventory = globalConfig.inventory

let filter = computed(() => {
  let temp: Array<Item> = [...inventory.values()]

  if (globalConfig.filter.storeType == 'has') {
    temp = temp.filter((i) => {
      return i.ic > 0
    })
  }
  if (globalConfig.filter.storeType == 'full') {
    temp = temp.filter((i) => {
      return i.ic == i.im
    })
  }
  return temp
})

</script>

<template>
  <n-space>
    <n-button-group>
      <n-button :type="'' == globalConfig.filter.inventoryType ? 'primary' : 'default'" style="width: 100px"
                @click="globalConfig.filter.inventoryType = ''">
        全部
      </n-button>
      <n-button :type="'has' == globalConfig.filter.inventoryType ? 'primary' : 'default'" style="width: 100px"
                @click="globalConfig.filter.inventoryType = 'has'">
        拥有
      </n-button>
      <n-button :type="'full' == globalConfig.filter.inventoryType ? 'primary' : 'default'" style="width: 100px"
                @click="globalConfig.filter.inventoryType = 'full'">
        已满
      </n-button>
    </n-button-group>
  </n-space>
  <n-table :bordered="false" style="margin-top: 10px">
    <thead>
    <tr>
      <th></th>
      <th>类型</th>
      <th>资源数</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="i in filter">
      <td>
        <n-image-group>
          <n-space>
            <n-image
                :src=func.srcHandler(i.ina)
                width="32"
            />
          </n-space>
        </n-image-group>
      </td>
      <td>{{ i.ina }}</td>
      <td>
        <n-tag v-if="i.ic < i.im && i.ic > 0" :bordered="false" type="success">
          {{ i.ic }}
        </n-tag>
        <n-tag v-if="i.ic == i.im" :bordered="false" type="warning">
          {{ i.ic }}
        </n-tag>
        <n-tag v-if="i.ic == 0" :bordered="false">
          {{ i.ic }}
        </n-tag>
      </td>
      <td>
        <n-button-group>
          <n-button
              v-if="i.ic > 0"
              type="default"
              @click="func.pushItem(i.ina, 1)"
          >
            存放一个
          </n-button>
          <n-button
              v-if="i.ic > 0"
              type="default"
              @click="func.pushItem(i.ina, i.ic)"
          >
            存放全部
          </n-button>
        </n-button-group>
      </td>
    </tr>
    </tbody>
  </n-table>
</template>

<style scoped>

</style>